<template>
  <div style="padding: 10px">
    <el-card>
      <el-breadcrumb
        v-if="name"
        slot="header"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <div style="display: flex; justify-content: space-between">
        <el-form style="display: flex">
          <el-form-item label="目录名称" label-width="80px">
            <el-input size="small" v-model="idList.directoryName"></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="80px">
            <el-select
              @change="stateChange"
              style="margin-right: 10px"
              size="small"
              v-model="value"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="clearForm">清除</el-button>
            <el-button type="primary" size="small" @click="search"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <div>
          <el-button
            v-if="name"
            type="text"
            icon="el-icon-back"
            @click="$router.push('list')"
            >返回学科</el-button
          >
          <el-button
            icon="el-icon-edit"
            type="success"
            size="small"
            @click="addDirectory"
            >新增目录</el-button
          >
        </div>
      </div>
      <el-alert :closable="false" :title="list.counts" type="info" show-icon>
      </el-alert>
      <el-table :data="list.items" style="width: 100%; margin-top: 15px">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期"> </el-table-column>
        <el-table-column prop="totals" label="试题数量"> </el-table-column>
        <el-table-column prop="address" label="状态">
          <template #default="scope">{{
            scope.row.state === 1 ? "已启用" : "已禁用"
          }}</template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="150">
          <template #default="scope">
            <el-button @click="changeSubState(scope.row)" type="text">{{
              scope.row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1 ? true : false"
              @click="amend(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state === 1 ? true : false"
              @click="delList(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <el-pagination
          @size-change="handleSizeChange($event)"
          @current-change="handleCurrentChange($event)"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="10"
          layout=" prev, pager, next, sizes, jumper"
          :background="true"
          :page-count="list.pages"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="21%"
      :before-close="handleClose"
    >
      <el-form ref="dialogFormRef" :model="addForm" :rules="rules">
        <el-form-item label="所属学科" label-width="80px" prop="subjectID">
          <el-select
            size="small"
            style="width: 100%"
            v-model="addForm.subjectID"
            placeholder="请选择"
          >
            <el-option
              v-for="item in subList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" label-width="80px" prop="directoryName">
          <el-input
            size="small"
            placeholder="请输入目录名称"
            v-model="addForm.directoryName"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeForm">取 消</el-button>
        <el-button type="primary" @click="addSubList">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, changeState, update, remove } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects.js'
import moment from 'moment'
export default {
  data () {
    return {
      title: '',
      dialogVisible: false,
      name: '',
      value: '',
      options: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      id: null,
      idList: {
        page: 1,
        pagesize: 10
      },
      list: {},
      counts: '',
      subList: [],
      addForm: {
        directoryName: '',
        subjectID: '',
        id: null
      },
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ],
        subjectID: [
          { required: true, message: '请输入所属学科', trigger: 'blur' }
        ]
      }
    }
  },
  async created () {
    this.name = this.$route.query.name ? this.$route.query.name : false
    this.id = this.$route.query.id ? this.$route.query.id : null
    localStorage.setItem('name', this.name)
    localStorage.setItem('id', this.id)
    if (localStorage.getItem('id') !== 'null') {
      this.idList.subjectID = localStorage.getItem('id')
    }
    this.getList(this.idList)
    const { data: res } = await simple()
    this.subList = res
  },
  methods: {
    async delList (row) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.idList = {}
          this.idList.page = 1
          this.idList.pagesize = 10
          this.getList(this.idList)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
        .catch(() => {})
    },
    amend (row) {
      this.title = '修改目录'
      this.addForm.directoryName = row.directoryName
      this.addForm.subjectID = row.subjectID
      this.addForm.id = row.id
      this.dialogVisible = true
    },
    addDirectory () {
      this.title = '新增目录'
      this.dialogVisible = true
    },
    async changeSubState (row) {
      await changeState({ id: row.id, state: row.state === 1 ? 0 : 1 })
      row.state = row.state === 1 ? 0 : 1
      this.$message.success('操作成功')
    },
    async addSubList () {
      if (this.title === '新增目录') {
        await this.$refs.dialogFormRef.validate()
        await add(this.addForm)
        this.idList = {}
        this.idList.page = 1
        this.idList.pagesize = 10
        this.getList(this.idList)
        this.addForm.directoryName = ''
        this.addForm.subjectID = ''
        this.dialogVisible = false
      } else {
        await this.$refs.dialogFormRef.validate()
        await update(this.addForm)
        this.idList = {}
        this.idList.page = 1
        this.idList.pagesize = 10
        this.getList(this.idList)
        this.addForm.directoryName = ''
        this.addForm.subjectID = ''
        this.addForm.id = null
        this.$message.success('操作成功')
        this.dialogVisible = false
      }
    },
    handleClose () {
      this.addForm.directoryName = ''
      this.addForm.subjectID = ''
      this.addForm.id = null
      this.dialogVisible = false
    },
    closeForm () {
      this.addForm.directoryName = ''
      this.addForm.subjectID = ''
      this.addForm.id = null
      this.dialogVisible = false
    },
    search () {
      this.getList(this.idList)
    },
    clearForm () {
      this.idList = {}
      this.idList.page = 1
      this.idList.pagesize = 10
      this.value = ''
    },
    stateChange (e) {
      this.idList.state = e
    },
    async getList (idList) {
      const { data: res } = await list(idList)
      this.list = res
      this.list.items.forEach((item) => {
        item.addDate = moment(item.addDate).format('YYYY-MM-DD HH:mm:ss')
      })
      this.list.counts = `数据一共 ${this.list.counts} 条`
    },
    async handleSizeChange (e) {
      this.idList.pagesize = e
      this.getList(this.idList)
    },
    async handleCurrentChange (e) {
      this.idList.page = e
      this.getList(this.idList)
    }
  },
  beforeDestroy () {
    localStorage.removeItem('name')
    localStorage.removeItem('id')
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-table__body {
  td {
    height: 57px;
  }
}
::v-deep .has-gutter {
  th {
    background-color: #fafafa;
  }
}
::v-deep .el-alert__icon {
  font-size: 18px;
}
::v-deep .el-table__header {
  border-bottom: 1px solid #e8e8e8;
}
.bottom {
  width: 100%;
  text-align: right;
  margin-top: 20px;
}
</style>
